<template>
    <div class="user-manage-container">
      <el-card class="user-manage-list">
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          @select="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column
            prop="username"
            :label="$t('msg.excel.name')"
            width="180"
          />
   
          <el-table-column prop="mobile" :label="$t('msg.excel.mobile')" />
          <el-table-column :label="$t('msg.excel.avatar')">
            <template #default="scope">
              <div class="avatar">
                <el-avatar :src="scope.row.avatar"></el-avatar>
              </div>
            </template>
          </el-table-column>
          <el-table-column :label="$t('msg.excel.role')" width="180">
            <template #default="scope">
              <div v-if="scope.row.role && scope.row.role.length > 0">
                <el-tag v-for="item in scope.row.role" :key="item.id">{{
                  item.title
                }}</el-tag>
              </div>
              <div v-else>
                <el-tag>{{ $t('msg.excel.defaultRole') }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="openTime" :label="$t('msg.excel.openTime')">
            <template #default="scope">
              {{ $filters.filterDate(scope.row.openTime) }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('msg.excel.action')" width="200">
            <template #default="scope">
              <div class="flex-justify-center">
                <el-button
                  size="small"
                  @click="handleDetail(scope.$index, scope.row._id)"
                >
                  {{ $t('msg.excel.show') }}
                </el-button>
                <el-button
                  size="small"
                  type="danger"
                  @click="showRoleDialog(scope.row)"
                >
                  {{ $t('msg.excel.showRole') }}
                </el-button>
                <el-popconfirm
                  :confirm-button-text="$t('msg.universal.confirm')"
                  :cancel-button-text="$t('msg.universal.cancel')"
                  :icon="InfoFilled"
                  icon-color="red"
                  :title="$t('msg.excel.dialogTitle1')"
                  @confirm="handleDelete(scope.row._id)"
                >
                  <template #reference>
                    <el-button size="small" type="danger">
                      {{ $t('msg.excel.remove') }}
                    </el-button>
                  </template>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
   
        <el-pagination
          :currentPage="currentPage"
          :page-size="pageSize"
          :page-sizes="[1, 5, 10, 15]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="pagination"
        >
        </el-pagination>
      </el-card>
      <export-excel v-model="exportVisible" />
      <role-dialog
        v-model="roleVisible"
        :userId="userId"
        @updateRole="getTabelData"
      />
    </div>
  </template>
   
  <script setup>
  import { ref, onActivated} from 'vue'
  import { userManageListAction, deleteUserAction } from '@/apis/user'
   
  import { InfoFilled } from '@element-plus/icons-vue'
   
  import RoleDialog from '@/modules/RoleDialog.vue'
   
  // 表格数据
  const tableData = ref([])
   
  // 分页器数据
   
  const currentPage = ref(1)
  const pageSize = ref(10)
  const pageTotal = ref(0)
   
  // 调用接口 -> 获取table数据
  const getTabelData = async () => {
    const res = await userManageListAction({
      page: currentPage.value,
      size: pageSize.value
    })
    const { list, total } = res
   
    pageTotal.value = total
    tableData.value = list
  }
  getTabelData()
   
  // 激活生命周期
  onActivated(getTabelData)
   
  // 分页器功能
  const handleSizeChange = (val) => {
    pageSize.value = val
    getTabelData()
  }
  const handleCurrentChange = (val) => {
    currentPage.value = val
    getTabelData()
  }
   
   
  // 分配角色
  const roleVisible = ref(false)
  const userId = ref('')
  const showRoleDialog = (row) => {
    roleVisible.value = true
    userId.value = row._id
  }
   
   
   
   
  </script>
   
  <style lang="scss" scoped></style>
   
   